import { useRequest } from "ahooks";
import { Modal,Form,Input } from "antd"
import { useForm } from "antd/es/form/Form";
import { useEffect } from "react"
import { type CourseWithoutId,type Course,updateCourse,creatCourse } from '../../api/course'
export default function EditOrCreateCourse(props:{
    isOpen:boolean,
    defaultValue:{},
    closeModal:()=>void,
    reloadData: () => void;
}){
    const [form] = useForm()
    useEffect(()=>{
        if(!props.isOpen) return
        if(!props.defaultValue){
            form.resetFields()
        }else{
            form.setFieldsValue(props.defaultValue)
        }
    },[props.isOpen,props.defaultValue])
    const {run,loading} = useRequest((value)=>updateCourse(value),{
        manual:true,
        onSuccess:()=>{
            props.reloadData()
        }
    })
    const {run:creatcourse} = useRequest((value)=>creatCourse(value),{
        manual:true,
        onSuccess:()=>{
            props.reloadData()
        }
    })
    function handleOk(){
        form.validateFields().then(()=>{
            if(props.defaultValue){
                run({
                    ...form.getFieldsValue(),
                    id:props.defaultValue.id,
                })
            }else{
                creatcourse(form.getFieldsValue())
            }
        })
        
    }
    return (
        <>
            <Modal
                title={props.defaultValue ? '编辑':'创建'}
                closable={{ 'aria-label': 'Custom Close Button' }}
                open={props.isOpen}
                onCancel={props.closeModal}
                onOk={handleOk}
            >
                <Form
                form={form}
                    name="basic"
                    autoComplete="off"
                >
                    <Form.Item<CourseWithoutId>
                    label="title"
                    name="title"
                    rules={[{ required: true, message: 'Please input your title!' }]}
                    >
                    <Input />
                    </Form.Item>

                    <Form.Item<CourseWithoutId>
                    label="price"
                    name="price"
                    rules={[{ required: true, message: 'Please input your price!' }]}
                    >
                    <Input />
                    </Form.Item>
                    <Form.Item<CourseWithoutId>
                    label="point"
                    name="point"
                    rules={[{ required: true, message: 'Please input your point!' }]}
                    >
                    <Input />
                    </Form.Item>
                    <Form.Item<CourseWithoutId>
                    label="category"
                    name="category"
                    rules={[{ required: true, message: 'Please input your category!' }]}
                    >
                    <Input />
                    </Form.Item>

                    <Form.Item<CourseWithoutId>
                    label="course_img"
                    name="course_img"
                    rules={[{ required: true, message: 'Please input your course_img!' }]}
                    >
                    <Input />
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}